<template>
  <div class="shopping">
    <div class="left-panel">
      <div class="panel-card filter-card">
        <div style="float: right!important;">
          <a-button type="default" icon="sync" size="small" @click="resetFilter"/>
        </div>
        <h4>筛选</h4>
      </div>
      <div class="panel-card">
        <h5 class="card-title">Prices</h5>
        <ul>
          <li>
            <input type="radio" class="priceRange" name="price" v-model="priceRange" value="全部" checked="checked">全部
          </li>
          <li>
            <input type="radio" class="priceRange" name="price" v-model="priceRange" value="低于 500￥">低于 500￥
          </li>
          <li>
            <input type="radio" class="priceRange" name="price" v-model="priceRange" value="500￥ - 1000￥">500￥ - 1000￥
          </li>
          <li>
            <input type="radio" class="priceRange" name="price" v-model="priceRange" value="高于 1000￥">高于 1000￥
          </li>
        </ul>
      </div>
      <div class="panel-card">
        <h5 class="card-title">Brands</h5>
        <div id="brand-list">
          <ul>
            <li v-for="(brand,index) in selectedBrands"
                style="margin-bottom: 1rem!important;"
                :key="brand.brand"
            >
              <input type="checkbox" checked @click="selectBrand(brand,-1,index)"/>
              <label>{{brand.brand}}</label>
              <span class="good-num">（{{brand.brand_num}}）</span>
            </li>

            <li v-for="(brand,index) in filtered_brands"
                v-if="setBrandVisibility(brand,index)"
                style="margin-bottom: 1rem!important;"
            >
              <input type="checkbox" @click="selectBrand(brand,1,index)">
              <label>{{brand.brand}}</label>
              <span class="good-num">（{{brand.brand_num}}）</span>
            </li>
          </ul>
        </div>

      </div>
      <div class="panel-card">
        <h5 class="card-title">Rating</h5>
        <div>
          <ul>
            <li v-for="(rating, index) in ratings"
                v-if="index!=0 && index!=5"
                class="rating"
                :key="rating.rating"
                @click="selectRating(rating,index)">
              <el-rate :value="rating.rating"
                       v-if="!rating.clicked"
                       style="display: inline-block;"
                       disabled>
              </el-rate>

              <el-rate :value="rating.rating"
                       v-if="rating.clicked"
                       style="display: inline-block; transform:scale(1.1,1.1);"
                       disabled-void-color="gray"
                       disabled>
              </el-rate>

              <span>及以上</span>

              <span class="good-num">{{countRatingProducts(ratings,rating.rating)}}</span>
            </li>
          </ul>
        </div>

      </div>
      <div class="panel-card">
        <h5 class="card-title">Free Shipping</h5>
        <input type="checkbox" v-model="freeShipping" @change="selectFreeShipping">Free shipping

      </div>
    </div>
    <div class="right-menu">
      <div class="search-card">
        <div style="border: unset;border-radius: 5px;padding: 4px 10px;">
          <a-input-search
            @change="productSearch"
            placeholder="搜寻商品"
            size="large"
            style="width: 200px;appearance: none!important;-webkit-appearance: none;outline:medium;"
            v-model="keyWord"/>
        </div>
        <div>
          <a-select default-value="随机推荐" style="width: 100px" @change="priceSorter(filtered_products,priceOrder)"
                    v-model="priceOrder">
            <a-select-option value="随机推荐">
              随机推荐
            </a-select-option>
            <a-select-option value="价格升序">
              价格升序
            </a-select-option>
            <a-select-option value="价格降序">
              价格降序
            </a-select-option>
          </a-select>
        </div>

      </div>
      <ul class="good-list">
        <li class="product"
            v-for="(product,index) in filtered_products"
            v-if="setProductVisibility(index)"
        >
          <div style="min-width: 200px">
            <div style="height: 14rem!important;display: flex;justify-content: center;align-items: center">
              <img :src="product.img_src" style="max-width:90%;max-height:90%;"/>
            </div>
            <div style="text-align: left;padding: 1.25rem">
              <p style="color: red">{{product.name}}</p>
              <p>商品描述</p>
              <el-rate :value="product.rating" disabled showtext
                       style="display: inline-block;margin-bottom: 1em"></el-rate>
              <div>
                <el-button type="primary" icon="el-icon-shopping-cart-2"
                           style="background-color: mediumpurple" size="mini"></el-button>
                <el-button type="primary" icon="el-icon-rating-off"
                           style="background-color: mediumpurple" size="mini"></el-button>
                <h2 style="float: right">{{product.price}}￥</h2>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="block" style="text-align: center;">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[20, 50, 100]"
          :page-size.sync="pageSize"
          layout="prev,pager,next,jumper,sizes"
          :total="filtered_products.length">
        </el-pagination>
      </div>


    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        //商品相关数据
        products: [
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/32960648/O1CN01fpItzk1GepM0WXIEN_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '蜜衣橱',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/53079294/O1CN01OIcSdM2IWheAl02ge_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '爱熏衣',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/12968373/O1CN01OWSoDL2BisuA6j9Oy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '爱熏衣',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/44242389/O1CN01XHTU1J1TWCuHwsW1A_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依感觉秀色',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/129156088/O1CN01D8VpBv1uqLwkoDEeh_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依感觉秀色',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/97427953/O1CN01S5KKr828cWbzr5X4M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依感觉秀色',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i4/111860231/O1CN01zxurbl1DZqCBucdwO_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '文龙',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/30603673/TB29mGmbDtYBeNjy1XdXXXXyVXa_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '文龙',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/123205378/O1CN01hateGQ1pbAgRoqD1I_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '文龙',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i4/1716270186/O1CN01ZMNIuB1DFEN2oszHn_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '文龙',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/433870065/O1CN01VlqLJh1CLoRs20jUy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '艾玫丽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/47855046/O1CN01zpgFSb1n97D79nhZF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '艾玫丽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/603230200/O1CN01bfplHg1DLduwO14Ps_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '艾玫丽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/113887782/O1CN010c6jKq27MCszpLXO7_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '艾玫丽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/45737807/O1CN01njf2Wj27XemoZ0Srg_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '艾玫丽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/15171914/O1CN01NJ8nt31Q0elO9jXVA_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/859270092/O1CN01uQW8YL1CYB6zEHnWX_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/28375209/O1CN01eXeQRU1oLloExDfSW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/59131157/O1CN0179zAo21KPwx2JST2Y_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/118251470/O1CN01zNYDFe1MjIvGaO4gQ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/134055056/O1CN01kDbOgc1nDhD8fqrhY_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '倩羽',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/284970081/O1CN01f7cd961CT8mUJOUAJ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/321350073/O1CN01MmBuU41CPTZVwoRpA_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i4/44737477/O1CN01C1l1Ku256W5lssSnv_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/56470423/O1CN01fDT9fj1Ezm76PF6HK_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/427890049/O1CN01zP9nlh1CEU3l7Sgad_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i4/51866873/O1CN01L63YqW20dsr5icGJV_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i4/427890049/O1CN01IyAAC71CEU6ee7155_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '缤蔓',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/40505628/O1CN014QPEBX1rRflE9S3qW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/45212349/O1CN01FVWmLR1TDszgt0O5l_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/18965052/O1CN01ZMMpps1nBrcVKKfBY_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/129156088/O1CN01D8VpBv1uqLwkoDEeh_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/917280007/O1CN01uE34Bp1BvFOmCAyve_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i4/112097249/O1CN01GRYoxt23Q5dXoP6RI_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i2/114983462/O1CN01zm317C1bRdlWcEwYR_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/29376578/O1CN01epY6xi1ySm1ChWhxJ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '伊自尚',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/12651855/O1CN01zZEV2z1PZdMYiMilS_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/32764303/O1CN01qpdyz11heoySohZoY_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/111175944/O1CN01EJ4wrT1tmOshPFBZU_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/32960648/O1CN01Yp1ACZ1GepKTe4D7I_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/33205018/O1CN01Hj7IPu1mwIA7W7CHN_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/718590095/O1CN0185v6AD1CZYKDu8BUh_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/103760569/O1CN01fknhLk1G4e38lR1Rb_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/128641740/O1CN01cpqa3v1OixrC0wsKi_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/117104810/O1CN016O6noG1lP1mPJPlfx_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '梦妮女装',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/113518713/O1CN01c984Bj2EEbcUXoT5o_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/11978943/O1CN01ksq7Y22FvwitAmy3M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i2/33205018/O1CN01DLPdxP1mwI9csNLsr_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/107195027/O1CN01SBFNe11n0PeyS7JiS_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/34888282/O1CN012QXRma2B3Cuhf63H2_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/109971684/O1CN01LJggSP1OJJWjjk03R_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/128249812/O1CN01lTleVc2MLwpQ10CH9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/150370060/O1CN01hGduVV1CJWOrTTYqB_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i4/124126093/O1CN01LHUtdz1usdqHvpi1F_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i2/48258189/O1CN01vRAYTY2AMbyxAenIo_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '衣物志',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i2/702290025/O1CN01V4uak91C3UblFQbGy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/129156088/O1CN011ATfzu1uqLwrvuubP_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://click.simba.taobao.com/cc_im?spm=a2e0b.20350158.31919782.50&p=%C5%AE%D7%B0&s=2028537159&k=641&clk1=c51a7a128dae6df4760c4f2e8abd8eeb&e=RESsOGNga5oLr5As3JvmZvTDrESAY0ivvUBz%2Fo8Sez1yxtacaNPNiTx1SE36KBYeUD7Dat4c3XmXIZCzeFkZguD3rVSuhZQBGbqY4sE%2F5Iq%2BsAHzD88AVrZXmeo3Psg3BPc5IrLyk1zNZ971ePvjAn%2FusmMAchYJQIJs%2FnufpMSYX3xlXzPpYiXTOWveVb%2BAmzWg8ENuhKBw2XTOKJ%2BotVd3fe7lZHjrg9iVGG5zF573usqGtyfeOuv%2FzbuAoe1wtjN4XXwwLp39wzrvx4OCN88ou8zHO5OYGwvmzG%2BNIKdkSbPQilinaZM7up%2Fmney0TnVx86XSUk5kRHGsezQmnE5MJJihK1NJbmv1MBOmipUhcf2BTPHvLdLt7JDTvt0zH9GDbQdZey4gDbHtIarM2nE%2FEMXV2GsP8YeRB6kB41CEhxLEhILMzqjxLvbYe4fzgw%2BR2JzowjZOdXHzpdJSThljZ27b2Ihl42APnbm%2F4GekaEVyHo7Bj%2BmAIpuvERe2D%2F6DcTEvTWjcLc1SQkjarXjvowKrZedXXz82Ldf%2B8nB80%2BHRtIE0rIm35T4r0ikEazTWBZ5Hvsi2wjQwckO%2BoJPbGL0ZmRVn0pMxaf9QgdwD%2Fr5BC4QqZ4mWr7755udx&union_lens=lensId%3AOPT%401632641267%400ba92e5a_79b5_17c2100b70b_4a9d%4001',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/132139236/O1CN01rFreoA2I68gCbbRGO_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i4/41743416/O1CN01uQWecx1b6Zf7pnf1r_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/29376578/O1CN01N2c7WZ1ySlwaXJpXk_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/503720058/O1CN01jpkcSJ1CIbavSPWwS_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/403540089/O1CN01olmU2n1CWnxFp2DLB_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i2/54693386/O1CN019cty411asplrrwKnU_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/114169541/O1CN01z4GQHF2KLpYkqIORH_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i1/53938869/O1CN01evNv072FO3PMMIsli_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/116448064/O1CN01upDDhN29RMVE7IN6b_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i3/32764303/O1CN01pCXoG21heoyaeQMEZ_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },
          {
            img_src: 'https://img.alicdn.com/imgextra/i3/41752726/O1CN01u1luRX1W0YNNR5vr2_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i4/128078591/O1CN01ZLskeL2DKj67FW4k3_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          }, {
            img_src: 'https://img.alicdn.com/imgextra/i1/125362664/O1CN01M5x4MV1VY9ot0giQz_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
            name: '产品' + Math.round((Math.random() * 2000)).toString(),
            price: Math.round((Math.random() * 2000)),
            rating: Math.round((Math.random() * 5)),
            freeShipping: Math.random() >= 0.5,
            brand: '依朵恋',
          },

        ],
        filtered_products: [],


        //商品过滤条件
        priceRange: '全部',
        filtered_brands: [],
        selectedBrands: [],
        ratings: [{
          rating: 5,
          clicked: false,
          productNum: 0,
        },
          {
            rating: 4,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 3,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 2,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 1,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 0,
            clicked: false,
            productNum: 0,
          },
        ],
        freeShipping: false,
        keyWord: '',

        //展品展示条件
        priceOrder: '随机推荐',

        pageSize: 20,
        currentPage: 1,
      }
    },
    created() {
      this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
    },
    watch: {

      priceRange: function (newRange, oldRange) {
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      }

    },
    methods: {

      //初始化过滤条件
      resetFilter(){
        this.priceOrder = '随机推荐'
        this.priceRange = '全部'
        this.ratings = [{
          rating: 5,
          clicked: false,
          productNum: 0,
        },
          {
            rating: 4,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 3,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 2,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 1,
            clicked: false,
            productNum: 0,
          },
          {
            rating: 0,
            clicked: false,
            productNum: 0,
          },
        ]
        this.filtered_brands = []
        this.selectedBrands = []
        this.freeShipping = false
        this.keyWord = ''
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      },

      //产品过滤器
      productFilter(priceRange, ratings, brands, freeShipping, keyWord) {

        //根据价格初步过滤产品
        this.priceRangeFilter(priceRange)

        //根据包邮状态在此过滤产品
        this.freeShippingFilter(freeShipping)

        //根据关键字过滤产品
        this.keyWordFilter(keyWord)

        //计算各等级评分产品数目并读取评分筛选状态
        this.setRating(ratings)
        //计算各品牌产品数目并读取品牌筛选状态
        this.setBrands(brands)
      },

      //产品价格过滤器
      priceRangeFilter(priceRange) {
        if (priceRange != '全部') {
          this.filtered_products = []
          for (var i = 0; i < this.products.length; i++) {
            if ((priceRange === '低于 500￥' && this.products[i].price < 500) ||
              (priceRange === '500￥ - 1000￥' && this.products[i].price >= 500 && this.products[i].price <= 1000) ||
              (priceRange === '高于 1000￥' && this.products[i].price > 1000)) {
              this.filtered_products.push(this.products[i])
            }
          }
        } else {
          this.filtered_products = this.products.slice(0)
        }
      },

      //包邮过滤器
      selectFreeShipping() {
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      },
      freeShippingFilter(freeShipping) {
        if (freeShipping) {
          var p
          var product = []
          for (p in this.filtered_products) {
            if (this.filtered_products[p].freeShipping) {
              product.push(this.filtered_products[p])
            }
          }
          this.filtered_products = product
        }
      },

      //关键字过滤器
      productSearch() {
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      },
      keyWordFilter(keyWord) {
        if (keyWord !== '') {
          var p
          var product = []
          for (p in this.filtered_products) {
            if (this.filtered_products[p].name.search(this.keyWord) != -1) {
              product.push(this.filtered_products[p])
            }
          }
          this.filtered_products = product
        }
      },

      //评分相关方法
      setRating(ratings) {

        //计算各等级评分产品数目
        this.countRatingProducts(ratings)
        //读取评分筛选状态
        this.getRatingFilterStatus(ratings)

      },
      countRatingProducts(ratings, rating = null) {

        if (rating === null) {
          //初始化各个等级评分的产品数目
          for (var i = 0; i < ratings.length; i++) {
            ratings[i].productNum = 0;
          }

          var p   //产品下标
          for (p in this.filtered_products) {
            for (var i = 0; i < ratings.length; i++) {
              if (this.filtered_products[p].rating === ratings[i].rating) {
                ratings[i].productNum++;
                break;
              }
            }
          }
        } else {
          //计算各个评分筛选条件的产品数目
          var count = 0;
          for (var i = 0; i < ratings.length; i++) {
            if (ratings[i].rating >= rating) {
              count += ratings[i].productNum
            }
          }
          return count
        }
      },
      getRatingFilterStatus(ratings) {
        for (var i = 1; i < ratings.length - 1; i++) {
          if (ratings[i].clicked) {
            var product = []
            var p   //产品下标
            for (p in this.filtered_products) {
              if (this.filtered_products[p].rating >= ratings[i].rating) {
                product.push(this.filtered_products[p])
              }
            }

            this.filtered_products = product
            break;
          }
        }
      },
      selectRating(rating, index) {
        rating.clicked = !rating.clicked
        for (var i = 0; i < this.ratings.length; i++) {
          if (i != index) {
            this.ratings[i].clicked = false
          }
        }
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      },

      //品牌相关方法
      setBrands(brands) {

        //计算各品牌产品数目
        this.countBrandNum(brands)
        //读取品牌筛选状态
        this.getBrandFilterStatus(brands)

      },
      countBrandNum(brands) {
        brands.splice(0, brands.length)
        var p   //产品下标
        for (p in this.filtered_products) {
          var flag = false
          for (var i = 0; i < brands.length; i++) {
            if (brands[i].brand === this.filtered_products[p].brand) {
              brands[i].brand_num += 1
              flag = true
              break
            }
          }
          if (flag === false) {
            var newBrand = {
              brand: this.filtered_products[p].brand,
              brand_num: 1,
              selected: false,
            }
            brands.push(newBrand)
          }
        }

        brands.sort(function (a, b) {
          return b.brand_num - a.brand_num
        })

      },
      getBrandFilterStatus(brands) {

        //修改已筛选品牌产品数
        for (var i = 0; i < this.selectedBrands.length; i++) {
          var brand = this.selectedBrands[i]
          var flag = false
          for (var j = 0; j < brands.length; j++) {
            if (brand.brand === brands[j].brand) {
              brands[j].selected = true
              brand.brand_num = brands[j].brand_num
              flag = true
              break;
            }
          }
          if (!flag) {
            brand.brand_num = 0
          }
        }

        //筛选产品
        if (this.selectedBrands.length != 0) {
          var products = []
          var p
          for (p in this.filtered_products) {
            for (var i = 0; i < this.selectedBrands.length; i++) {
              if (this.selectedBrands[i].brand === this.filtered_products[p].brand) {
                products.push(this.filtered_products[p])
                break
              }
            }
          }
          this.filtered_products = products
        }
      },
      selectBrand(brand, op, index) {

        //取消勾选商标
        if (op === -1) {
          for (var i = 0; i < this.filtered_brands.length; i++) {
            if (brand.brand === this.filtered_brands[i].brand) {
              this.filtered_brands[i].selected = false
              break
            }
          }
          this.selectedBrands.splice(index, 1)

        } else {
          brand.selected = true
          var newBrand = {}
          newBrand.brand = brand.brand
          newBrand.brand_num = brand.brand_num
          newBrand.selected = true
          this.selectedBrands.push(newBrand)
        }
        this.productFilter(this.priceRange, this.ratings, this.filtered_brands, this.freeShipping, this.keyWord)
      },
      setBrandVisibility(brand, index) {
        if (brand.selected) {
          return false
        } else {

          var selected = 0
          for (var i = 0; i <= index; i++) {
            if (this.filtered_brands[i].selected) {
              selected++
            }
          }
          return index + 1 - selected + this.selectedBrands.length <= 10;
        }

      },

      //分页相关方法
      setProductVisibility(index) {
        return (this.currentPage - 1) * this.pageSize <= index && index < this.currentPage * this.pageSize
      },

      //价格排序器
      priceSorter(products, priceOrder) {
        if (priceOrder === '随机推荐') {
          products.sort(function (a, b) {
            return 0.5 - Math.random()
          });
        } else if (priceOrder === '价格升序') {
          products.sort(function (a, b) {
            return a.price - b.price
          });

        } else if (priceOrder === '价格降序') {
          products.sort(function (a, b) {
            return b.price - a.price
          });
        }
        this.currentPage = 1
      },



    }
  }
</script>

<style scoped>

  @media screen and (min-width: 768px) {
    .left-panel {
      flex: 0 0 25%;
      max-width: 25%;

    }

    .right-menu {
      flex: 0 0 75%;
      max-width: 75%;
    }
  }

  .rating {
    margin-bottom: 1rem !important;
  }

  .rating:hover {
    border-style: solid;
    border-color: gainsboro;
    border-width: 1px;
  }

  .shopping {
    background-color: #efeefd;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }

  .left-panel, .right-menu {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .panel-card {
    background-color: white;
    border-radius: 15px;
    margin-bottom: 30px;
    border: none;
    box-shadow: 0px 0px 12px 0px rgba(120, 146, 141, 0.06);
    padding: 6px 14px;
  }

  .filter-card {
    padding: .5rem 1rem !important;
  }

  .card-title {
    margin-bottom: .75rem;
  }

  .priceRange {
    margin-bottom: 1rem;
    margin-right: 5px;
  }

  .good-num {
    display: block;
    float: right;
    padding: .3em .3em;
    line-height: 1.3;
    text-transform: capitalize;
    border-radius: 5px;
    background-color: #e0defc;
  }

  .search-card {
    background-color: white;
    display: flex !important;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 16px;
    padding-left: 20px;
    border-radius: 15px;
    margin-bottom: 27px;
    box-shadow: 0px 0px 12px 0px rgba(120, 146, 141, 0.06);
    align-items: center !important;
    justify-content: space-between !important;
  }

  h4 {
    font-size: 1.400em;
  }

  h5 {
    font-size: 1.200em;
  }

  h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h5 {
    display: block;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Muli', sans-serif;
    font-weight: 400;
    margin: 0px;
    line-height: 1.5;
    color: #3f414d;
  }

  * {
    box-sizing: border-box;
  }

  div {
    display: block;
  }

  .good-list {
    margin-top: -1rem;
    margin-left: -1rem;
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
  }

  .product {
    background-color: white;
    margin-top: 1rem;
    margin-left: 1rem;
    width: calc(33% - 1rem);
    display: list-item;
    text-align: -webkit-match-parent;
    border-radius: 15px;
  }

  .product:hover {
    border-style: solid;
    border-color: gainsboro;
    border-width: 1px;
  }


</style>
